<template>
  <div>
    <!-- <HmCalendar :value="time" @input="time = $event" /> -->
    <HmCalendar v-model="time" />

    <hr>
    <h3>使用i18n</h3>
    <button @click="changeLang">切换语言</button>
    <div>{{ $t('xxx') }}</div>
    <!--
      1:项目中使用i18n
      2:收集所有的数据
         分模块统计出来
           excel收集：
         zh:   user:{
                 login:{
                   login:'登陆'   $t('user.login')

                 }
               }
         en:  user:{
                 login:{
                   login:'login'
                 }
               }
     3:应用

     -->

    <!-- <UploadImg :value="imgUrl" @input="imgUrl = $event" /> -->
    <!--
   v-model
      子组件标签  :value="appValue"   @input="appValue=$event"
      子组件标签  v-model="appValue"
      子组件内：
         props:['value123']
         model:{
           prop:'value123',
           event:'input123'
         },
         this.$emit('input123',实参值)

 -->

    <UploadImg v-model="imgUrl" />
    <canvas ref="canvas" />
    <button @click="btnClick">点击生成二维码</button>
    <hr>
    <!--
     菜单：
     组件名： el-menu
                default-active="默认选中哪一项（它的值对应子项的index的值）"
                router:是否启用路由模式,注意default-active="$route.path" index的值就是路由的跳转path地址
                 单层菜单
                 el-menu-item   index:对应该项的值与el-menu内的default-active的值对应
                       默认插槽：icon图标
                       具名插槽(title)：文本内容
                 多层菜单
                el-submenu  index:对应该项的值与el-menu内的default-active的值对应
                    具名插槽（title）:定义多层菜单的主项的icon与内容
                    默认插槽：定义子项菜单
                         el-menu-item
   -->
  </div>
</template>
<script>
import Qrcode from 'qrcode'
import jsCookie from 'js-cookie'
import HmCalendar from './components/HmCalendar.vue'
export default {
  components: {
    HmCalendar
  },
  data() {
    return {
      imgUrl:
        'http://dhf81-1305249343.cos.ap-guangzhou.myqcloud.com/1652492959183',
      time: new Date()
    }
  },
  methods: {
    btnClick() {
      Qrcode.toCanvas(this.$refs.canvas, 'https://www.baidu.com/', {
        width: 500,
        height: 500
      })
    },
    changeLang() {
      // this.$i18n.locale = 'en'
      const arr = ['zh', 'en']
      // zh:0  en:1
      this.$i18n.locale = arr[1 - arr.indexOf(this.$i18n.locale)]

      jsCookie.set('lang', this.$i18n.locale)
      this.$router.go(0)
    }
  }
}
</script>
<style></style>
